<template>
  <div id="install">
    <el-row type="flex" class="row-bg" justify="between">
      <el-col :span="9"></el-col>
      <el-col :span="6">
        <div class="brand"></div>
        <form class="login-form">
          <div class="flex-row">
            <label class="lf--label" for="username">
              <i class="fa fa-user info"></i>
            </label>
            <input
              id="username"
              class="lf--input"
              value="admin"
              type="text"
              readonly
            />
          </div>
          <div class="flex-row">
            <label class="lf--label" for="password">
              <i class="fa fa-unlock info"></i>
            </label>
            <input
              v-model="password"
              class="lf--input"
              placeholder="设置密码"
              type="password"
            />
          </div>
          <div class="flex-row">
            <label class="lf--label" for="password">
              <i class="fa fa-lock info"></i>
            </label>
            <input
              v-model="confirmPassword"
              class="lf--input"
              placeholder="确认密码"
              type="password"
            />
          </div>
          <el-button
            size="mini"
            style="border-radius: 0px;"
            type="primary"
            class="lf--submit"
            @click.prevent="install"
            :loading="$store.state.auth.loading"
          >
            创建管理员账号
          </el-button>
        </form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";

export default {
  data() {
    return {
      password: "",
      confirmPassword: ""
    };
  },
  methods: {
    install(ev) {
      ev.target.blur();
      if (this.$store.state.auth.loading) {
        return false;
      }

      if (!this.password) {
        this.$notify({ message: "请输入密码", type: "error" });
        return;
      }
      if (this.password != this.confirmPassword) {
        this.$notify({ message: "请密码和确认密码不一致", type: "error" });
        return;
      }
      var re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
      if (!re.test(this.password)) {
        this.$notify({
          message: "密码至少包含大小写字母，数字，且长度为8位到16位",
          type: "error"
        });
        return;
      }
      this.$store.state.auth.loading = true;
      var user = {};

      user["password"] = this.password;

      this.$store.dispatch("install", {
        user: user,
        callafter: this.showError
      });

      return false;
    },
    showError(res) {
      if (res.code != "200") {
        this.$notify({ message: m(res.message), type: "error" });
      } else {
        this.$notify({ message: m("successful_operation"), type: "success" });
      }
    },
    m(k) {
      return m(k);
    }
  },
  created() {
    this.$store.dispatch("installAuth");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#install {
  background: linear-gradient(
    135deg,
    rgba(36, 46, 77, 0.9),
    rgba(137, 126, 121, 0.9)
  );
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 1.5em;
  height: 100%;
}

.brand {
  background-position: center;
  background-image: url("/static/assets/logo.png");
  background-size: 240px 60px;
  background-repeat: no-repeat;
  width: 280px;
  text-align: center;
  height: 60px;
  display: block;
  position: absolute;
  margin-top: 130px;
  margin-left: 70px;
}

.login-form {
  width: 100%;
  padding: 40px 40px 10px 40px;
  position: absolute;
  background: rgba(0, 0, 0, 0.15);
  margin-top: 200px;
}
.login-form:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 100%;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#35c3c1),
    to(#00d6b7)
  );
  background: linear-gradient(to right, #409eff, #409eff);
}
@media screen and (min-width: 600px) {
  .login-form {
    width: 50vw;
    max-width: 15em;
  }
}

.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1em;
}

.lf--label {
  width: 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #f5f6f8;
  cursor: pointer;
}

.lf--input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 1em;
  border: 0;
  color: #8f8f8f;
  font-size: 1rem;
}

.lf--submit {
  display: block;
  padding: 1em;
  width: 100%;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 0.75em;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.lf--remember {
  margin-top: 5px;
  color: #fff;
  font-size: 15px;
  text-align: left;
}

.lf--forgot {
  margin-top: 1em;
  color: #00d6b7;
  font-size: 0.65em;
  text-align: center;
}

::-webkit-input-placeholder {
  color: #8f8f8f;
}

:-ms-input-placeholder {
  color: #8f8f8f;
}

::-ms-input-placeholder {
  color: #8f8f8f;
}

::placeholder {
  color: #8f8f8f;
}
</style>
